<template>
	<view class="page">
		<view class="pages-1">
			<canvas class="canvas" :style="{ width: '366px', height: '580px' }" canvas-id="canvasID"></canvas>
			<!-- #ifdef H5 -->
			<div class="app-h5-save-poster">
				<image :src="imgUrl" class="poster-img" mode="widthFix"></image>
			</div>
			<!-- #endif -->
			<!-- <image src="@/static/img/invited_bg.jpg" mode="widthFix"  class="inviteImgUrl"></image>
			<view class="box">
				<view class="box1">
					<image :src="h5Url" mode="" class="h5Url"></image>
				</view>
			</view> -->
		</view>
		<!-- #ifdef H5 -->
		<view class="btn primary mt-40 save-img-box flex-row flex-center radius-10"  @click="longtapImageApp">长按上方图片保存海报</view>
		<!-- #endif  -->
		
		<!-- #ifdef APP -->
		<view class="btn primary mt-40 save-img-box flex-row flex-center radius-10"  @click="saveImage">下载海报</view>
		<!-- #endif  -->
	</view>
</template>

<script>
import Qrcode from "qrious";
export default {
	data() {
		return {
			h5Url: null,
			inviteImgUrl: null,
			canvasData: {
				width: 350,
				height: 560
			},
			imgUrl: "",
			ctx: null
		};
	},
	onLoad(options) {
		let inviteVo = uni.getStorageSync("inviteVo");
		console.log('inviteVo',inviteVo)
		this.inviteImgUrl = inviteVo.invitePosterUrl;
		let qr = new Qrcode({
			value: inviteVo.h5Url
		});
		this.h5Url = qr.toDataURL();
		this.ctx = uni.createCanvasContext("canvasID", this);
		this.drawImage();
	},
	methods: {
		upx2px(data) {
			return uni.upx2px(data);
		},
		async drawImage() {
			let that = this,
				ctx = this.ctx;
			await uni.getImageInfo({
				src: "../../../static/img/invited_bg.jpg", //网络图片用来做背景
				success: res => {
					console.log("success", res);
					let height = res.height,
						width = res.width;
					let scale = uni.upx2px(750) / width;
					this.canvasData.width = uni.upx2px(750);
					this.canvasData.height = scale * height;
					this.ctx.save();
					this.ctx.drawImage(res.path, 0, 0, this.canvasData.width, this.canvasData.height);
					this.ctx.draw(true);

					uni.getImageInfo({
						src: that.h5Url, //二维码图片
						success: res => {
							console.log("success", res.width);
							let imgSize = this.upx2px(160),
								boxSize = this.upx2px(180);
							ctx.save();
							//x, y, w, h
							ctx.rect(this.upx2px(280), this.upx2px(530), boxSize, boxSize);
							ctx.fillStyle = "#FFFFFF";
							ctx.fill();
							ctx.save();
							// path ,x,y
							this.ctx.drawImage(res.path, this.upx2px(290), this.upx2px(540), imgSize, imgSize);
							ctx.draw(
								true,
								setTimeout(() => {
									uni.canvasToTempFilePath({
										//将canvas生成图片
										x: 0,
										y: 0,
										width: this.canvasData.width,
										height: this.canvasData.height,
										// destWidth: 281, //截取canvas的宽度
										// destHeight: 500, //截取canvas的高度
										canvasId: "canvasID",
										success: res => {
											this.imgUrl = res.tempFilePath;
										},
										fail: err => {
											console.log(err);
										}
									});
								}, 500)
							);
						},
						fail: err => {
							console.log("image error", err);
						}
					});
				},
				fail: err => {
					console.log("image error", err);
				}
			});
		},
		longtapImageApp(){
			uni.showLoading({
				title: '保存中'
			})
			uni.canvasToTempFilePath({
				canvasId: 'canvasID',
				fileType: 'png',
				quality: 1, //图片质量
				success: function(result) {
					var tempFilePath = result.tempFilePath;
					// #ifdef APP-PLUS
					uni.saveImageToPhotosAlbum({
						filePath: tempFilePath,
						success: function() {
							uni.hideLoading();
							uni.showToast({
								title: '已成功保存至相册',
								icon: 'none'
							})
						},
						fail() {}
					});
					// #endif
				},
			});
		},
		saveImage() {
			var _this = this;
			uni.saveImageToPhotosAlbum({
				filePath: _this.imgUrl,
				success() {
					uni.showToast({
						title: "图片已保存图片到相册",
						icon: "none",
						duration: 2000
					});
				},
				fail() {
					uni.hideLoading();
					uni.showModal({
						content: "检测到您没打开获取信息功能权限，是否去设置打开？",
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if (res.confirm) {
								uni.openSetting({
									success: res => {
										console.log(res);
										uni.showToast({
											title: "请重新点击分享保存图片～",
											icon: "none"
										});
									}
								});
							} else {
								uni.showToast({
									title: "保存失败，请打开权限功能重试",
									icon: "none"
								});
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.pages-1 {
	width: 100vw;
	position: relative;
	
	.inviteImgUrl {
		position: relative;
		width: 100vw;
	}
	.app-h5-save-poster{
		position: absolute;
		top:0;
		left:0;
		z-index: 10;
		.poster-img{
			width:100vw;
		}
	}
	$codeSize: 160rpx;
	$padSize: 30rpx;
	.box {
		width: $codeSize + $padSize;
		height: $codeSize + $padSize;
		left: 0;
		position: absolute;
		left: 50%;
		top: 600rpx;
		border: 1rpx solid #eee;
		background-color: white;
		transform: translate(-50%, -50%);
		border-radius: 5%;
		.box1 {
			width: $codeSize + $padSize;
			height: $codeSize + $padSize;
			display: flex;
			justify-content: center;
			align-items: center;
			.h5Url {
				width: $codeSize;
				height: $codeSize;
			}
		}
	}
}
.save-img-box {
	height: 88rpx;
	margin: 40rpx 60rpx 20rpx;
}

</style>
